<template>
    <div>
    <div>
      <van-nav-bar title="发布" /> 
    </div>
    <div align="center" v-show="deal">
      <p>用户：{{uN}}，发布商品</p>
    <van-cell-group>
  <van-field
    v-model="goods_name"
    label="商品名称"
    placeholder="请输入商品名称"
    required
  />
  <van-field
    v-model="goods_num"
    label="商品数量"
    placeholder="商品数量(单位：件)[只需要输入数字即可]"
    required
  />
  <van-field
    v-model="goods_desc"
    label="商品简介"
    placeholder="此商品的用途"
    required
  />
 
  <van-field
    v-model="goods_info"
    label="商品详情"
    type="textarea"
    placeholder="此商品几成新，用了多久，有何瑕疵，想用来换取什么等等(不能超过120个字)"
    rows="5"
    autosize
    required
  />
   <van-field
    v-model="goods_price"
    label="商品原价"
    placeholder="人民币（单位：元）[只需要输入数字即可]"
    required
  />
  <van-field
    v-model="goods_picture"
    label="商品图片"
    placeholder="请输入图片的URL地址"
    error
  />
    </van-cell-group>
    <br>
    <van-button type="danger"  @click="submit">提交</van-button>
    </div>
    <br><br><br>
    <div align="center" v-show="!deal">
      <br><br><br><br><br><br>
      <van-button type="danger" @click='Toperson'>请登录</van-button>
    </div>
    </div>
</template>
<script>
import { Dialog } from 'vant'; 
import { Toast } from 'vant';
import { Field } from 'vant';
import axios from "axios";
export default {
data() {
    return {
      goods_name:"",
      goods_num:"",
      goods_desc:"",
      goods_info:"",
      goods_price:"",
      goods_picture:"",
      //show:false
    
    }
  },
  computed:{
    deal(){
      return this.$store.state.deal
    },
    uN(){
            return this.$store.state.uN
        }
  },
  methods: {
    Toperson() {
        Dialog.alert({
        title: '发布提示',
        message: '请登录个人账号'
        }).then(() => {
         // on close
        });
    },
                 
        submit(){
          if(this.goods_name == ''){
            Toast.fail('商品名称不能为空');
          }else if(this.goods_num == ''){
            Toast.fail('商品数量不能为空');
          }else if(this.goods_desc == ''){
            Toast.fail('商品简介不能为空');
          }else if(this.goods_info == ''){
            Toast.fail('商品详情不能为空');
          }else if(this.goods_price == ''){
            Toast.fail('商品原价不能为空');
          }else if(this.goods_picture == ''){
            Toast.fail('商品图片不能为空');
          }else{
            Dialog.confirm({
              title: '发布确认',
              message: '确认是否发布'
            }).then(() => {
              // on confirm
            axios({
                method: "post",
                url: "http://localhost:3000/getgoods",
                data: {
                goods_name: this.goods_name,
                goods_num: this.goods_num,
                goods_desc: this.goods_desc,
                goods_info: this.goods_info,
                goods_price: this.goods_price,
                goods_picture: this.goods_picture,
                goods_master: this.uN
                },
                headers: {
                "Content-Type": "text/plain"
                }
            }).then(result => {
              Toast.success('发布成功');
                console.log(result);
                        this.goods_name="",
                        this.goods_num="",
                        this.goods_desc="",
                        this.goods_info="",
                        this.goods_price="",
                        this.goods_picture=""
            })
            }).catch(() => {
              // on cancel
            });

            

          }
        }
  }
}
</script>
<style>

</style>
